<template>
  <div class="arrangement-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-nav">
        <div class="nav-left">
          <!-- <a-button type="text" @click="goBack" class="back-btn">
            <ArrowLeftOutlined />
            <span>返回</span>
          </a-button> -->

          <div class="breadcrumb">
            <router-link to="/dashboard" class="breadcrumb-item">
              <HomeOutlined />
              <span>工作台</span>
            </router-link>
            <span class="breadcrumb-separator">/</span>
            <router-link to="/reincarnation" class="breadcrumb-item">轮回转世系统</router-link>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-item current">投胎安排管理</span>
          </div>
        </div>
      </div>

      <div class="header-content">
        <div class="header-main">
          <h1 class="page-title">投胎安排管理</h1>
          <p class="page-description">投胎家庭配对 · 时间地点安排 · 条件智能匹配</p>
        </div>

        <div class="header-actions">
          <a-button type="primary">
            <PlusOutlined />
            新建安排
          </a-button>
          <a-button>
            <SettingOutlined />
            优化配置
          </a-button>
        </div>
      </div>
    </div>

    <!-- 实时状态面板 -->
    <div class="status-panel">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :lg="6">
          <div class="status-card pending">
            <div class="status-icon">
              <ClockCircleOutlined />
            </div>
            <div class="status-content">
              <div class="status-value">{{ pendingArrangements }}</div>
              <div class="status-label">待安排</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :lg="6">
          <div class="status-card scheduled">
            <div class="status-icon">
              <CalendarOutlined />
            </div>
            <div class="status-content">
              <div class="status-value">{{ scheduledArrangements }}</div>
              <div class="status-label">已安排</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :lg="6">
          <div class="status-card processing">
            <div class="status-icon">
              <SyncOutlined :spin="true" />
            </div>
            <div class="status-content">
              <div class="status-value">{{ processingArrangements }}</div>
              <div class="status-label">执行中</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :lg="6">
          <div class="status-card completed">
            <div class="status-icon">
              <CheckCircleOutlined />
            </div>
            <div class="status-content">
              <div class="status-value">{{ completedArrangements }}</div>
              <div class="status-label">已完成</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <a-row :gutter="[32, 32]">
      <!-- 左侧安排列表 -->
      <a-col :xs="24" :lg="16">
        <div class="arrangements-section">
          <!-- 筛选和搜索 -->
          <div class="filters-bar">
            <a-space wrap>
              <a-input-search v-model:value="searchQuery" placeholder="搜索姓名或ID" style="width: 200px" @search="handleSearch" />
              <a-select v-model:value="statusFilter" placeholder="状态筛选" style="width: 120px" allowClear>
                <a-select-option value="">全部状态</a-select-option>
                <a-select-option value="pending">待安排</a-select-option>
                <a-select-option value="scheduled">已安排</a-select-option>
                <a-select-option value="processing">执行中</a-select-option>
                <a-select-option value="completed">已完成</a-select-option>
              </a-select>
              <a-select v-model:value="priorityFilter" placeholder="优先级" style="width: 120px" allowClear>
                <a-select-option value="">全部优先级</a-select-option>
                <a-select-option value="urgent">紧急</a-select-option>
                <a-select-option value="high">高</a-select-option>
                <a-select-option value="normal">普通</a-select-option>
                <a-select-option value="low">低</a-select-option>
              </a-select>
              <a-range-picker v-model:value="dateRange" :placeholder="['开始时间', '结束时间']" />
            </a-space>
          </div>

          <!-- 安排列表 -->
          <div class="arrangements-list">
            <div v-for="arrangement in filteredArrangements" :key="arrangement.id" class="arrangement-item">
              <div class="arrangement-header">
                <div class="soul-info">
                  <a-avatar :style="{ backgroundColor: getKarmaColor(arrangement.karma) }" size="large">
                    {{ arrangement.name.charAt(0) }}
                  </a-avatar>
                  <div class="soul-details">
                    <div class="soul-name">{{ arrangement.name }}</div>
                    <div class="soul-meta">ID: {{ arrangement.soulId }} | 业力: {{ arrangement.karma }} | 第{{ arrangement.cycle }}世</div>
                  </div>
                </div>
                <div class="arrangement-status">
                  <a-tag :color="getStatusColor(arrangement.status)">
                    {{ getStatusText(arrangement.status) }}
                  </a-tag>
                  <a-tag :color="getPriorityColor(arrangement.priority)">
                    {{ arrangement.priority }}
                  </a-tag>
                </div>
              </div>

              <div class="arrangement-content">
                <div class="arrangement-details">
                  <div class="detail-section">
                    <div class="section-title">转世目标</div>
                    <div class="detail-row">
                      <span class="detail-label">目标道别：</span>
                      <span class="detail-value realm" :style="{ color: getRealmColor(arrangement.targetRealm) }"> {{ getRealmIcon(arrangement.targetRealm) }} {{ arrangement.targetRealm }} </span>
                    </div>
                    <div class="detail-row">
                      <span class="detail-label">预定时间：</span>
                      <span class="detail-value">{{ arrangement.scheduledTime || '待定' }}</span>
                    </div>
                  </div>

                  <div v-if="arrangement.family" class="detail-section">
                    <div class="section-title">家庭安排</div>
                    <div class="detail-row">
                      <span class="detail-label">家庭类型：</span>
                      <span class="detail-value">{{ arrangement.family.type }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="detail-label">家庭背景：</span>
                      <span class="detail-value">{{ arrangement.family.background }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="detail-label">地理位置：</span>
                      <span class="detail-value">{{ arrangement.family.location }}</span>
                    </div>
                  </div>

                  <div class="detail-section">
                    <div class="section-title">匹配条件</div>
                    <div class="conditions-tags">
                      <a-tag v-for="condition in arrangement.conditions" :key="condition" size="small">
                        {{ condition }}
                      </a-tag>
                    </div>
                  </div>
                </div>

                <div v-if="arrangement.specialRequirements" class="special-requirements">
                  <div class="requirements-title">特殊要求：</div>
                  <div class="requirements-content">{{ arrangement.specialRequirements }}</div>
                </div>
              </div>

              <div class="arrangement-actions">
                <a-space>
                  <a-button v-if="arrangement.status === 'pending'" type="primary" size="small" @click="scheduleArrangement(arrangement)"> 安排投胎 </a-button>
                  <a-button v-if="arrangement.status === 'scheduled'" size="small" @click="executeArrangement(arrangement)"> 执行投胎 </a-button>
                  <a-button type="text" size="small" @click="editArrangement(arrangement)"> 编辑 </a-button>
                  <a-button type="text" size="small" @click="viewDetails(arrangement)"> 详情 </a-button>
                  <a-dropdown>
                    <a-button type="text" size="small"> 更多 <DownOutlined /> </a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item @click="postponeArrangement(arrangement)"> 延期安排 </a-menu-item>
                        <a-menu-item @click="reassignFamily(arrangement)"> 重新分配家庭 </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item @click="cancelArrangement(arrangement)" danger> 取消安排 </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-space>
              </div>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 右侧工具面板 -->
      <a-col :xs="24" :lg="8">
        <div class="tools-panel">
          <!-- 快速安排工具 -->
          <div class="tool-section">
            <div class="section-header">
              <h4>快速安排工具</h4>
            </div>
            <div class="quick-tools">
              <a-button block @click="autoMatchFamilies" class="tool-btn">
                <RobotOutlined />
                智能家庭匹配
              </a-button>
              <a-button block @click="optimizeSchedule" class="tool-btn">
                <ThunderboltOutlined />
                时间优化安排
              </a-button>
              <a-button block @click="balanceRegions" class="tool-btn">
                <GlobalOutlined />
                地区平衡分配
              </a-button>
            </div>
          </div>

          <!-- 今日安排日程 -->
          <div class="tool-section">
            <div class="section-header">
              <h4>今日安排日程</h4>
            </div>
            <div class="schedule-timeline">
              <div v-for="schedule in todaySchedule" :key="schedule.id" class="schedule-item">
                <div class="schedule-time">{{ schedule.time }}</div>
                <div class="schedule-content">
                  <div class="schedule-name">{{ schedule.name }}</div>
                  <div class="schedule-details">{{ schedule.targetRealm }} · {{ schedule.location }}</div>
                </div>
                <div class="schedule-status" :class="schedule.status">
                  {{ getStatusText(schedule.status) }}
                </div>
              </div>
            </div>
          </div>

          <!-- 可用家庭资源 -->
          <div class="tool-section">
            <div class="section-header">
              <h4>可用家庭资源</h4>
              <a-button type="link" size="small" @click="refreshFamilies">刷新</a-button>
            </div>
            <div class="family-resources">
              <div v-for="family in availableFamilies" :key="family.id" class="family-item">
                <div class="family-header">
                  <div class="family-type">{{ family.type }}</div>
                  <div class="family-capacity">{{ family.availableSlots }}个空位</div>
                </div>
                <div class="family-details">
                  <div class="family-location">{{ family.location }}</div>
                  <div class="family-traits">
                    <a-tag v-for="trait in family.traits" :key="trait" size="small">
                      {{ trait }}
                    </a-tag>
                  </div>
                </div>
                <div class="family-rating">
                  <a-rate :value="family.rating" disabled size="small" />
                  <span class="rating-text">({{ family.rating }}星)</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 地区分布统计 -->
          <div class="tool-section">
            <div class="section-header">
              <h4>地区分布统计</h4>
            </div>
            <div class="region-stats">
              <div v-for="region in regionStats" :key="region.name" class="region-item">
                <div class="region-name">{{ region.name }}</div>
                <div class="region-bar">
                  <div
                    class="bar-fill"
                    :style="{
                      width: (region.count / region.total) * 100 + '%',
                      backgroundColor: region.color
                    }"
                  ></div>
                </div>
                <div class="region-count">{{ region.count }}/{{ region.total }}</div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- 新增安排弹窗 -->
    <a-modal v-model:open="showNewArrangementModal" title="新增投胎安排" width="800px" @ok="handleCreateArrangement">
      <!-- 弹窗内容... -->
      <div class="modal-content">
        <a-form :model="newArrangement" layout="vertical">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="生灵信息">
                <a-input v-model:value="newArrangement.name" placeholder="生灵姓名" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="业力值">
                <a-input-number v-model:value="newArrangement.karma" :min="0" :max="100" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 更多表单项... -->
        </a-form>
      </div>
    </a-modal>

    <!-- 详情查看弹窗 -->
    <a-modal v-model:open="showDetailsModal" title="投胎安排详情" width="900px" :footer="null">
      <div v-if="selectedArrangement" class="details-modal-content">
        <div class="details-header">
          <div class="soul-basic-info">
            <a-avatar :style="{ backgroundColor: getKarmaColor(selectedArrangement.karma) }" size="large">
              {{ selectedArrangement.name.charAt(0) }}
            </a-avatar>
            <div class="basic-details">
              <h3>{{ selectedArrangement.name }} ({{ selectedArrangement.soulId }})</h3>
              <div class="cycle-info">第{{ selectedArrangement.cycle }}世转世</div>
              <div class="karma-info">业力：{{ selectedArrangement.karma }}</div>
            </div>
          </div>
          <div class="arrangement-meta">
            <a-tag :color="getStatusColor(selectedArrangement.status)">
              {{ getStatusText(selectedArrangement.status) }}
            </a-tag>
            <a-tag :color="getPriorityColor(selectedArrangement.priority)">
              {{ selectedArrangement.priority }}
            </a-tag>
          </div>
        </div>

        <a-divider />

        <div class="details-sections">
          <a-row :gutter="[24, 24]">
            <!-- 基本信息 -->
            <a-col :span="24">
              <div class="detail-section">
                <h4><UserOutlined /> 基本信息</h4>
                <div class="section-content">
                  <a-row :gutter="[16, 16]">
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">目标道别：</span>
                        <span class="info-value realm" :style="{ color: getRealmColor(selectedArrangement.targetRealm) }"> {{ getRealmIcon(selectedArrangement.targetRealm) }} {{ selectedArrangement.targetRealm }} </span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">预期寿命：</span>
                        <span class="info-value">{{ selectedArrangement.expectedLifespan || 0 }}岁</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">前世死因：</span>
                        <span class="info-value">{{ selectedArrangement.previousDeathReason }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">负责官员：</span>
                        <span class="info-value">{{ selectedArrangement.assignedOfficer }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">创建时间：</span>
                        <span class="info-value">{{ selectedArrangement.createdTime }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">安排时间：</span>
                        <span class="info-value">{{ selectedArrangement.scheduledTime || '待定' }}</span>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-col>

            <!-- 家庭信息 -->
            <a-col :span="24" v-if="selectedArrangement.family">
              <div class="detail-section">
                <h4><HomeOutlined /> 家庭安排</h4>
                <div class="section-content">
                  <a-row :gutter="[16, 16]">
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">家庭类型：</span>
                        <span class="info-value">{{ selectedArrangement.family.type }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">家庭背景：</span>
                        <span class="info-value">{{ selectedArrangement.family.background }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">地理位置：</span>
                        <span class="info-value">{{ selectedArrangement.family.location }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">社会地位：</span>
                        <span class="info-value">{{ selectedArrangement.family.socialStatus }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">教育程度：</span>
                        <span class="info-value">{{ selectedArrangement.family.education }}</span>
                      </div>
                    </a-col>
                    <a-col :span="8">
                      <div class="info-item">
                        <span class="info-label">父母姓名：</span>
                        <span class="info-value">{{ selectedArrangement.family.parentNames?.join('、') || '未知' }}</span>
                      </div>
                    </a-col>
                  </a-row>

                  <div class="family-values">
                    <div class="values-title">家庭价值观：</div>
                    <div class="values-tags">
                      <a-tag v-for="value in selectedArrangement.family.values" :key="value" color="blue">
                        {{ value }}
                      </a-tag>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>

            <!-- 转世条件 -->
            <a-col :span="12">
              <div class="detail-section">
                <h4><CheckCircleOutlined /> 匹配条件</h4>
                <div class="section-content">
                  <div class="conditions-list">
                    <a-tag v-for="condition in selectedArrangement.conditions" :key="condition" color="green">
                      {{ condition }}
                    </a-tag>
                  </div>
                </div>
              </div>
            </a-col>

            <!-- 特殊要求 -->
            <a-col :span="12">
              <div class="detail-section">
                <h4><ExclamationCircleOutlined /> 特殊要求</h4>
                <div class="section-content">
                  <div class="requirements-text">
                    {{ selectedArrangement.specialRequirements || '无特殊要求' }}
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>

        <div class="details-actions">
          <a-space>
            <a-button type="primary" @click="editArrangement(selectedArrangement)">
              <EditOutlined />
              编辑安排
            </a-button>
            <a-button v-if="selectedArrangement.status === 'pending'" @click="scheduleArrangement(selectedArrangement)">
              <CalendarOutlined />
              立即安排
            </a-button>
            <a-button v-if="selectedArrangement.status === 'scheduled'" @click="executeArrangement(selectedArrangement)">
              <ThunderboltOutlined />
              执行转世
            </a-button>
            <a-button @click="showDetailsModal = false"> 关闭 </a-button>
          </a-space>
        </div>
      </div>
    </a-modal>

    <!-- 编辑安排弹窗 -->
    <a-modal v-model:open="showEditModal" title="编辑投胎安排" width="800px" :footer="null">
      <div v-if="selectedArrangement" class="edit-modal-content">
        <a-form layout="vertical">
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <a-form-item label="目标道别">
                <a-select v-model:value="selectedArrangement.targetRealm" placeholder="选择转世道别">
                  <a-select-option value="天道">☆ 天道</a-select-option>
                  <a-select-option value="人道">♂ 人道</a-select-option>
                  <a-select-option value="阿修罗道">⚔ 阿修罗道</a-select-option>
                  <a-select-option value="畜生道">🐾 畜生道</a-select-option>
                  <a-select-option value="饿鬼道">👻 饿鬼道</a-select-option>
                  <a-select-option value="地狱道">🔥 地狱道</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="优先级">
                <a-select v-model:value="selectedArrangement.priority" placeholder="选择优先级">
                  <a-select-option value="urgent">紧急</a-select-option>
                  <a-select-option value="high">高</a-select-option>
                  <a-select-option value="normal">普通</a-select-option>
                  <a-select-option value="low">低</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="安排时间">
                <a-date-picker v-model:value="selectedArrangement.scheduledTime" show-time placeholder="选择安排时间" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="预期寿命">
                <a-input-number v-model:value="selectedArrangement.expectedLifespan" :min="0" placeholder="预期寿命" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="特殊要求">
                <a-textarea v-model:value="selectedArrangement.specialRequirements" placeholder="输入特殊要求..." :rows="3" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="edit-actions">
          <a-space>
            <a-button type="primary" @click="handleSaveEdit">
              <SaveOutlined />
              保存修改
            </a-button>
            <a-button @click="showEditModal = false"> 取消 </a-button>
          </a-space>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import {
  PlusOutlined,
  TeamOutlined,
  ExportOutlined,
  ClockCircleOutlined,
  CalendarOutlined,
  SyncOutlined,
  CheckCircleOutlined,
  DownOutlined,
  RobotOutlined,
  ThunderboltOutlined,
  GlobalOutlined,
  ArrowLeftOutlined,
  SettingOutlined,
  HomeOutlined,
  UserOutlined,
  EditOutlined,
  SaveOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons-vue'

// 路由
const router = useRouter()

// 响应式数据
const searchQuery = ref('')
const statusFilter = ref('')
const priorityFilter = ref('')
const dateRange = ref([])
const showNewArrangementModal = ref(false)
const showBatchArrangementModal = ref(false)

// 统计数据
const pendingArrangements = ref(234)
const scheduledArrangements = ref(456)
const processingArrangements = ref(89)
const completedArrangements = ref(123)

// 新增安排表单数据
const newArrangement = ref({
  name: '',
  karma: 0,
  targetRealm: '',
  priority: 'normal'
})

// 投胎安排数据
const arrangements = ref([
  {
    id: 1,
    soulId: 'S001',
    name: '张三',
    karma: 85,
    cycle: 8,
    targetRealm: '人道',
    status: 'scheduled',
    priority: 'high',
    scheduledTime: '2023-12-16 14:30',
    family: {
      type: '书香门第',
      background: '教师家庭',
      location: '江南水乡',
      parentNames: ['李文华', '王秀梅'],
      socialStatus: '中产阶级',
      education: '大学教育',
      values: ['重视教育', '崇尚文化', '注重品德']
    },
    conditions: ['智慧天赋', '文学修养', '善良品德'],
    specialRequirements: '需要良好的教育环境，培养文学才能',
    expectedLifespan: 78,
    previousDeathReason: '寿终正寝',
    assignedOfficer: '转世司王判官',
    createdTime: '2023-12-15 09:30'
  },
  {
    id: 2,
    soulId: 'S002',
    name: '李四',
    karma: 92,
    cycle: 5,
    targetRealm: '天道',
    status: 'pending',
    priority: 'urgent',
    scheduledTime: null,
    family: null,
    conditions: ['功德圆满', '修行成就', '慈悲心肠'],
    specialRequirements: '需要特殊的天道转世程序',
    expectedLifespan: 0,
    previousDeathReason: '舍身救人',
    assignedOfficer: '天界接引使者',
    createdTime: '2023-12-14 16:45'
  },
  {
    id: 3,
    soulId: 'S003',
    name: '王五',
    karma: 73,
    cycle: 12,
    targetRealm: '人道',
    status: 'completed',
    priority: 'normal',
    scheduledTime: '2023-12-15 09:00',
    family: {
      type: '武林世家',
      background: '习武家庭',
      location: '华山脚下',
      parentNames: ['王大侠', '李凤仙'],
      socialStatus: '江湖侠客',
      education: '武学传承',
      values: ['行侠仗义', '武德为先', '保家卫国']
    },
    conditions: ['武学天赋', '正义感', '侠义精神'],
    specialRequirements: '需要武学传承环境，培养侠义品格',
    expectedLifespan: 65,
    previousDeathReason: '战死沙场',
    assignedOfficer: '转世司李判官',
    createdTime: '2023-12-14 11:20'
  },
  {
    id: 4,
    soulId: 'S004',
    name: '赵六',
    karma: 45,
    cycle: 18,
    targetRealm: '畜生道',
    status: 'processing',
    priority: 'low',
    scheduledTime: '2023-12-16 08:15',
    family: {
      type: '农户人家',
      background: '养牛场',
      location: '乡村田野',
      parentNames: ['老黄牛', '母牛花花'],
      socialStatus: '家畜',
      education: '无',
      values: ['勤劳耕作', '默默奉献', '承受苦难']
    },
    conditions: ['偿还业债', '勤劳本性', '温顺品格'],
    specialRequirements: '需要在劳作中洗涤业障，学会奉献精神',
    expectedLifespan: 8,
    previousDeathReason: '过度劳累',
    assignedOfficer: '畜生道司张官',
    createdTime: '2023-12-13 14:30'
  },
  {
    id: 5,
    soulId: 'S005',
    name: '孙七',
    karma: 15,
    cycle: 3,
    targetRealm: '饿鬼道',
    status: 'scheduled',
    priority: 'normal',
    scheduledTime: '2023-12-17 23:00',
    family: null,
    conditions: ['消除贪欲', '体验饥苦', '忏悔罪业'],
    specialRequirements: '需要在饥饿中反思贪婪，消除物质执着',
    expectedLifespan: 0,
    previousDeathReason: '因贪污被杀',
    assignedOfficer: '饿鬼道司冥官',
    createdTime: '2023-12-15 20:45'
  },
  {
    id: 6,
    soulId: 'S006',
    name: '周八',
    karma: 88,
    cycle: 9,
    targetRealm: '人道',
    status: 'pending',
    priority: 'high',
    scheduledTime: null,
    family: {
      type: '医者世家',
      background: '中医传承',
      location: '古都长安',
      parentNames: ['周神医', '李药师'],
      socialStatus: '名医望族',
      education: '医学传承',
      values: ['悬壶济世', '医者仁心', '救死扶伤']
    },
    conditions: ['医学天赋', '慈悲心肠', '精湛技艺'],
    specialRequirements: '需要医学世家环境，传承悬壶济世精神',
    expectedLifespan: 82,
    previousDeathReason: '积劳成疾',
    assignedOfficer: '转世司陈判官',
    createdTime: '2023-12-15 13:15'
  },
  {
    id: 7,
    soulId: 'S007',
    name: '吴九',
    karma: 67,
    cycle: 15,
    targetRealm: '人道',
    status: 'scheduled',
    priority: 'normal',
    scheduledTime: '2023-12-18 10:30',
    family: {
      type: '商贾之家',
      background: '丝绸商人',
      location: '繁华商埠',
      parentNames: ['吴大富', '钱美娘'],
      socialStatus: '富商大贾',
      education: '商业教育',
      values: ['诚信经营', '财富积累', '商道仁义']
    },
    conditions: ['商业头脑', '人际交往', '财富管理'],
    specialRequirements: '需要商业环境熏陶，学习诚信经营之道',
    expectedLifespan: 71,
    previousDeathReason: '意外溺水',
    assignedOfficer: '转世司钱判官',
    createdTime: '2023-12-14 08:50'
  },
  {
    id: 8,
    soulId: 'S008',
    name: '郑十',
    karma: 95,
    cycle: 22,
    targetRealm: '天道',
    status: 'pending',
    priority: 'urgent',
    scheduledTime: null,
    family: null,
    conditions: ['功德圆满', '慈悲济世', '智慧觉悟'],
    specialRequirements: '已达天人境界，需要天界特殊程序接引',
    expectedLifespan: 0,
    previousDeathReason: '功德圆满坐化',
    assignedOfficer: '天界护法金刚',
    createdTime: '2023-12-15 19:20'
  },
  {
    id: 9,
    soulId: 'S009',
    name: '何十一',
    karma: 38,
    cycle: 7,
    targetRealm: '畜生道',
    status: 'completed',
    priority: 'low',
    scheduledTime: '2023-12-14 15:45',
    family: {
      type: '山林野兽',
      background: '深山老林',
      location: '千里荒山',
      parentNames: ['山中虎王', '母虎翠花'],
      socialStatus: '野生动物',
      education: '无',
      values: ['野性本能', '弱肉强食', '自然生存']
    },
    conditions: ['野兽本能', '生存技能', '自然适应'],
    specialRequirements: '需要在野性中磨练，学会生存法则',
    expectedLifespan: 12,
    previousDeathReason: '酗酒身亡',
    assignedOfficer: '畜生道司林官',
    createdTime: '2023-12-13 17:30'
  },
  {
    id: 10,
    soulId: 'S010',
    name: '钱十二',
    karma: 58,
    cycle: 11,
    targetRealm: '人道',
    status: 'scheduled',
    priority: 'normal',
    scheduledTime: '2023-12-19 14:00',
    family: {
      type: '农耕世家',
      background: '种田人家',
      location: '江南水乡',
      parentNames: ['钱老实', '田秀花'],
      socialStatus: '普通农民',
      education: '农业知识',
      values: ['勤劳朴实', '日出而作', '与土为亲']
    },
    conditions: ['勤劳本分', '朴实善良', '农业技能'],
    specialRequirements: '需要在田园生活中体验劳动之美，培养朴实品格',
    expectedLifespan: 68,
    previousDeathReason: '自然老死',
    assignedOfficer: '转世司田判官',
    createdTime: '2023-12-14 12:40'
  },
  {
    id: 11,
    soulId: 'S011',
    name: '刘甲',
    karma: 82,
    cycle: 6,
    targetRealm: '阿修罗道',
    status: 'pending',
    priority: 'high',
    scheduledTime: null,
    family: {
      type: '战士族群',
      background: '修罗战场',
      location: '阿修罗界',
      parentNames: ['修罗王', '战母娘娘'],
      socialStatus: '战士',
      education: '战斗技艺',
      values: ['勇猛无畏', '战斗荣耀', '力量至上']
    },
    conditions: ['战斗天赋', '勇武精神', '战略智慧'],
    specialRequirements: '需要在战斗中磨练意志，但需控制嗔怒之心',
    expectedLifespan: 500,
    previousDeathReason: '英勇战死',
    assignedOfficer: '阿修罗道司战神',
    createdTime: '2023-12-15 11:25'
  },
  {
    id: 12,
    soulId: 'S012',
    name: '陈乙',
    karma: 25,
    cycle: 4,
    targetRealm: '地狱道',
    status: 'processing',
    priority: 'normal',
    scheduledTime: '2023-12-16 00:00',
    family: null,
    conditions: ['接受惩罚', '忏悔罪业', '消除恶业'],
    specialRequirements: '需要在地狱之火中洗涤罪恶，彻底悔改',
    expectedLifespan: 0,
    previousDeathReason: '谋财害命',
    assignedOfficer: '地狱判官牛头',
    createdTime: '2023-12-13 22:15'
  },
  {
    id: 13,
    soulId: 'S013',
    name: '林丙',
    karma: 74,
    cycle: 13,
    targetRealm: '人道',
    status: 'completed',
    priority: 'normal',
    scheduledTime: '2023-12-13 16:20',
    family: {
      type: '文人雅士',
      background: '诗书世家',
      location: '文化古城',
      parentNames: ['林学士', '诗韵娘'],
      socialStatus: '文人学者',
      education: '诗书传承',
      values: ['文墨风雅', '诗书传家', '学而时习']
    },
    conditions: ['文学才华', '诗词歌赋', '学者风范'],
    specialRequirements: '需要在文化熏陶中提升品格，传承文明',
    expectedLifespan: 75,
    previousDeathReason: '抑郁而终',
    assignedOfficer: '转世司文判官',
    createdTime: '2023-12-12 14:35'
  },
  {
    id: 14,
    soulId: 'S014',
    name: '黄丁',
    karma: 91,
    cycle: 19,
    targetRealm: '天道',
    status: 'scheduled',
    priority: 'urgent',
    scheduledTime: '2023-12-20 06:00',
    family: null,
    conditions: ['智慧圆满', '慈悲无量', '功德无边'],
    specialRequirements: '已证菩萨果位，需要特殊天界仪式',
    expectedLifespan: 0,
    previousDeathReason: '度化众生功德圆满',
    assignedOfficer: '天界菩萨',
    createdTime: '2023-12-15 07:30'
  },
  {
    id: 15,
    soulId: 'S015',
    name: '张戊',
    karma: 52,
    cycle: 8,
    targetRealm: '人道',
    status: 'pending',
    priority: 'normal',
    scheduledTime: null,
    family: {
      type: '工匠世家',
      background: '手艺传承',
      location: '手工作坊',
      parentNames: ['张师傅', '巧手娘'],
      socialStatus: '手工艺人',
      education: '技艺传承',
      values: ['精工细作', '诚信手艺', '传承技艺']
    },
    conditions: ['手工天赋', '精益求精', '踏实肯干'],
    specialRequirements: '需要在手艺中体验创造之美，培养工匠精神',
    expectedLifespan: 62,
    previousDeathReason: '工伤意外',
    assignedOfficer: '转世司工判官',
    createdTime: '2023-12-14 16:50'
  },
  {
    id: 16,
    soulId: 'S016',
    name: '李己',
    karma: 36,
    cycle: 5,
    targetRealm: '畜生道',
    status: 'scheduled',
    priority: 'low',
    scheduledTime: '2023-12-17 12:30',
    family: {
      type: '宠物家庭',
      background: '富贵人家',
      location: '豪门宅邸',
      parentNames: ['贵宾犬王子', '贵妇犬公主'],
      socialStatus: '宠物',
      education: '无',
      values: ['忠诚陪伴', '讨人欢心', '享受生活']
    },
    conditions: ['忠诚品格', '温顺性情', '适应能力'],
    specialRequirements: '需要在陪伴中学会忠诚，体验无条件的爱',
    expectedLifespan: 15,
    previousDeathReason: '赌博败家自杀',
    assignedOfficer: '畜生道司宠官',
    createdTime: '2023-12-13 09:20'
  },
  {
    id: 17,
    soulId: 'S017',
    name: '王庚',
    karma: 79,
    cycle: 14,
    targetRealm: '人道',
    status: 'processing',
    priority: 'high',
    scheduledTime: '2023-12-16 11:45',
    family: {
      type: '军旅世家',
      background: '将门虎子',
      location: '边关要塞',
      parentNames: ['王将军', '军嫂英花'],
      socialStatus: '军人家庭',
      education: '军事教育',
      values: ['保家卫国', '军人荣誉', '忠诚勇敢']
    },
    conditions: ['军事才能', '忠勇品格', '领导能力'],
    specialRequirements: '需要在军营中锻炼品格，培养保国精神',
    expectedLifespan: 58,
    previousDeathReason: '为救战友牺牲',
    assignedOfficer: '转世司武判官',
    createdTime: '2023-12-14 19:40'
  },
  {
    id: 18,
    soulId: 'S018',
    name: '赵辛',
    karma: 43,
    cycle: 9,
    targetRealm: '饿鬼道',
    status: 'pending',
    priority: 'normal',
    scheduledTime: null,
    family: null,
    conditions: ['消除贪心', '体验匮乏', '学会分享'],
    specialRequirements: '需要在饥渴中反思，消除对物质的贪著',
    expectedLifespan: 0,
    previousDeathReason: '囤积居奇饿死',
    assignedOfficer: '饿鬼道司饥官',
    createdTime: '2023-12-15 21:30'
  },
  {
    id: 19,
    soulId: 'S019',
    name: '孙壬',
    karma: 86,
    cycle: 7,
    targetRealm: '人道',
    status: 'scheduled',
    priority: 'high',
    scheduledTime: '2023-12-18 15:20',
    family: {
      type: '艺术世家',
      background: '戏曲传承',
      location: '梨园深处',
      parentNames: ['孙名角', '花旦秀'],
      socialStatus: '戏曲艺人',
      education: '艺术传承',
      values: ['艺术传承', '精益求精', '娱乐大众']
    },
    conditions: ['艺术天赋', '表演才能', '文化传承'],
    specialRequirements: '需要在艺术中陶冶情操，传承文化精髓',
    expectedLifespan: 73,
    previousDeathReason: '突发心脏病',
    assignedOfficer: '转世司艺判官',
    createdTime: '2023-12-14 10:15'
  },
  {
    id: 20,
    soulId: 'S020',
    name: '周癸',
    karma: 12,
    cycle: 2,
    targetRealm: '地狱道',
    status: 'processing',
    priority: 'normal',
    scheduledTime: '2023-12-16 03:30',
    family: null,
    conditions: ['承受业报', '深度忏悔', '洗涤罪恶'],
    specialRequirements: '罪恶深重，需要在地狱中长期受苦才能洗净',
    expectedLifespan: 0,
    previousDeathReason: '伤天害理被诛',
    assignedOfficer: '地狱判官马面',
    createdTime: '2023-12-13 01:45'
  }
])

// 今日日程
const todaySchedule = ref([
  {
    id: 1,
    time: '09:00',
    name: '王五',
    targetRealm: '人道',
    location: '北方平原',
    status: 'completed'
  },
  {
    id: 2,
    time: '14:30',
    name: '张三',
    targetRealm: '人道',
    location: '江南水乡',
    status: 'scheduled'
  },
  {
    id: 3,
    time: '16:45',
    name: '赵六',
    targetRealm: '畜生道',
    location: '山林野地',
    status: 'pending'
  }
])

// 可用家庭资源
const availableFamilies = ref([
  {
    id: 1,
    type: '富商之家',
    location: '繁华都市',
    availableSlots: 2,
    traits: ['富裕', '商业环境', '社交广泛'],
    rating: 4.2
  },
  {
    id: 2,
    type: '农耕世家',
    location: '田园乡村',
    availableSlots: 5,
    traits: ['朴实', '勤劳', '与自然亲近'],
    rating: 3.8
  },
  {
    id: 3,
    type: '武林世家',
    location: '山中隐居',
    availableSlots: 1,
    traits: ['武功传承', '正义感', '强健体魄'],
    rating: 4.5
  }
])

// 地区统计
const regionStats = ref([
  { name: '中原地区', count: 245, total: 500, color: '#1890ff' },
  { name: '江南水乡', count: 189, total: 300, color: '#52c41a' },
  { name: '塞北草原', count: 67, total: 200, color: '#fa8c16' },
  { name: '西南山区', count: 123, total: 400, color: '#722ed1' }
])

// 计算属性
const filteredArrangements = computed(() => {
  let filtered = arrangements.value

  if (searchQuery.value) {
    filtered = filtered.filter((arr) => arr.name.includes(searchQuery.value) || arr.soulId.includes(searchQuery.value))
  }

  if (statusFilter.value) {
    filtered = filtered.filter((arr) => arr.status === statusFilter.value)
  }

  if (priorityFilter.value) {
    filtered = filtered.filter((arr) => arr.priority === priorityFilter.value)
  }

  return filtered
})

// 方法
const handleSearch = () => {
  message.info(`搜索: ${searchQuery.value}`)
}

const scheduleArrangement = (arrangement) => {
  arrangement.status = 'scheduled'
  arrangement.scheduledTime = '2023-12-16 16:00'
  message.success(`${arrangement.name}的投胎已安排`)
}

const executeArrangement = (arrangement) => {
  arrangement.status = 'processing'
  message.success(`${arrangement.name}的投胎执行中`)
}

// 弹窗控制
const showDetailsModal = ref(false)
const showEditModal = ref(false)
const selectedArrangement = ref(null)

const editArrangement = (arrangement) => {
  // 创建一个副本并转换日期格式
  selectedArrangement.value = {
    ...arrangement,
    // 将字符串日期转换为 dayjs 对象（如果存在的话）
    scheduledTime: arrangement.scheduledTime ? dayjs(arrangement.scheduledTime) : null
  }
  showEditModal.value = true
}

const viewDetails = (arrangement) => {
  selectedArrangement.value = arrangement
  showDetailsModal.value = true
}

const postponeArrangement = (arrangement) => {
  message.warning(`${arrangement.name}的安排已延期`)
}

const reassignFamily = (arrangement) => {
  message.info(`重新为${arrangement.name}分配家庭`)
}

const cancelArrangement = (arrangement) => {
  message.error(`${arrangement.name}的安排已取消`)
}

const autoMatchFamilies = () => {
  message.success('智能家庭匹配完成')
}

const optimizeSchedule = () => {
  message.success('时间安排已优化')
}

const balanceRegions = () => {
  message.success('地区分配已平衡')
}

const refreshFamilies = () => {
  message.success('家庭资源已刷新')
}

const exportArrangements = () => {
  message.success('安排数据导出成功')
}

const handleCreateArrangement = () => {
  message.success('新增安排创建成功')
  showNewArrangementModal.value = false
  // 重置表单
  newArrangement.value = {
    name: '',
    karma: 0,
    targetRealm: '',
    priority: 'normal'
  }
}

const handleSaveEdit = () => {
  // 将 dayjs 对象转换回字符串格式保存
  if (selectedArrangement.value.scheduledTime) {
    selectedArrangement.value.scheduledTime = selectedArrangement.value.scheduledTime.format('YYYY-MM-DD HH:mm')
  }

  // 在实际项目中，这里应该调用 API 保存数据
  // 找到原始记录并更新
  const index = arrangements.value.findIndex((arr) => arr.id === selectedArrangement.value.id)
  if (index !== -1) {
    arrangements.value[index] = { ...selectedArrangement.value }
  }

  message.success(`${selectedArrangement.value.name}的安排已更新`)
  showEditModal.value = false
}

// 辅助方法
const getKarmaColor = (karma) => {
  if (karma >= 90) return '#d4990a'
  if (karma >= 80) return '#52c41a'
  if (karma >= 60) return '#1890ff'
  if (karma >= 40) return '#fa8c16'
  return '#f5222d'
}

const getRealmColor = (realm) => {
  const colors = {
    天道: '#f59e0b',
    人道: '#10b981',
    阿修罗道: '#8b5cf6',
    畜生道: '#f97316',
    饿鬼道: '#06b6d4',
    地狱道: '#ef4444'
  }
  return colors[realm] || '#666'
}

const getRealmIcon = (realm) => {
  const icons = {
    天道: '☆',
    人道: '♂',
    阿修罗道: '⚔',
    畜生道: '🐾',
    饿鬼道: '👻',
    地狱道: '🔥'
  }
  return icons[realm] || '●'
}

const getStatusColor = (status) => {
  const colors = {
    pending: 'orange',
    scheduled: 'blue',
    processing: 'cyan',
    completed: 'green'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待安排',
    scheduled: '已安排',
    processing: '执行中',
    completed: '已完成'
  }
  return texts[status] || status
}

const getPriorityColor = (priority) => {
  const colors = {
    urgent: 'red',
    high: 'orange',
    normal: 'blue',
    low: 'default'
  }
  return colors[priority] || 'default'
}

// 返回主页方法
const goBack = () => {
  router.push('/reincarnation')
}
</script>

<style lang="scss" scoped>
.arrangement-management {
  padding: 0;

  // 页面头部
  .page-header {
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .header-nav {
      margin-bottom: 24px;

      .nav-left {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      .back-btn {
        color: $text-secondary;
        padding: 6px 12px;
        height: auto;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 6px;
        transition: all 0.2s ease;

        &:hover {
          color: $primary-color;
          background: rgba(114, 46, 209, 0.1);
        }

        span {
          font-weight: 500;
        }
      }

      .breadcrumb {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin: 0;

        .breadcrumb-item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: $text-secondary;
          text-decoration: none;
          line-height: 14px;
          height: 14px;

          &:hover {
            color: $primary-color;
          }

          &.current {
            color: $text-primary;
            cursor: default;
          }

          span {
            line-height: 14px;
            height: 14px;
            display: flex;
            align-items: center;
          }
        }

        .breadcrumb-separator {
          color: $text-tertiary;
          margin: 0 8px;
          line-height: 14px;
          height: 14px;
          display: flex;
          align-items: center;
        }
      }
    }

    .header-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      .header-main {
        .page-title {
          font-size: 28px;
          font-weight: 600;
          color: $text-primary;
          margin: 0 0 8px 0;
          line-height: 1.2;
        }

        .page-description {
          font-size: 14px;
          color: $text-secondary;
          margin: 0;
          line-height: 1.4;
        }
      }

      .header-actions {
        display: flex;
        gap: 12px;

        .ant-btn {
          height: 36px;
          padding: 0 16px;
          border-radius: 6px;
          font-size: 14px;
          transition: all 0.2s ease;

          &:hover {
            transform: translateY(-1px);
          }
        }
      }
    }
  }

  // 状态面板
  .status-panel {
    margin-bottom: 32px;

    .status-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      height: 100px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.2);
      }

      &.pending {
        border-left: 4px solid #fa8c16;
      }

      &.scheduled {
        border-left: 4px solid #1890ff;
      }

      &.processing {
        border-left: 4px solid #13c2c2;
      }

      &.completed {
        border-left: 4px solid #52c41a;
      }

      .status-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, $primary-color, $secondary-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        margin-right: 16px;
      }

      .status-content {
        flex: 1;

        .status-value {
          font-size: 24px;
          font-weight: bold;
          color: $text-primary;
          margin-bottom: 4px;
        }

        .status-label {
          font-size: 14px;
          color: $text-secondary;
        }
      }
    }
  }

  // 安排部分
  .arrangements-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);

    .filters-bar {
      margin-bottom: 24px;
      padding: 16px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .arrangements-list {
      .arrangement-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        transition: all 0.3s ease;

        &:hover {
          border-color: rgba(255, 255, 255, 0.2);
          transform: translateY(-1px);
        }

        .arrangement-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          .soul-info {
            display: flex;
            align-items: center;

            .soul-details {
              margin-left: 16px;

              .soul-name {
                font-size: 18px;
                font-weight: 600;
                color: $text-primary;
                margin-bottom: 4px;
              }

              .soul-meta {
                font-size: 12px;
                color: $text-secondary;
              }
            }
          }

          .arrangement-status {
            display: flex;
            gap: 8px;
          }
        }

        .arrangement-content {
          .arrangement-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 16px;

            .detail-section {
              .section-title {
                font-size: 13px;
                font-weight: 600;
                color: $text-primary;
                margin-bottom: 8px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding-bottom: 4px;
              }

              .detail-row {
                display: flex;
                margin-bottom: 4px;
                font-size: 12px;

                .detail-label {
                  color: $text-tertiary;
                  width: 80px;
                  flex-shrink: 0;
                }

                .detail-value {
                  color: $text-primary;
                  flex: 1;

                  &.realm {
                    font-weight: 600;
                  }
                }
              }

              .conditions-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
              }
            }
          }

          .special-requirements {
            background: rgba(255, 255, 255, 0.05);
            padding: 12px;
            border-radius: 8px;
            border-left: 3px solid $primary-color;

            .requirements-title {
              font-size: 12px;
              font-weight: 600;
              color: $text-secondary;
              margin-bottom: 4px;
            }

            .requirements-content {
              font-size: 13px;
              color: $text-primary;
              line-height: 1.4;
            }
          }
        }

        .arrangement-actions {
          padding-top: 16px;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
      }
    }
  }

  // 工具面板
  .tools-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .tool-section {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 20px;
      backdrop-filter: blur(10px);

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        h4 {
          font-size: 16px;
          font-weight: 600;
          color: $text-primary;
          margin: 0;
        }
      }

      .quick-tools {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .tool-btn {
          text-align: left;
          height: 40px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }

      .schedule-timeline {
        .schedule-item {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);

          &:last-child {
            border-bottom: none;
          }

          .schedule-time {
            font-size: 14px;
            font-weight: 600;
            color: $primary-color;
            width: 60px;
            flex-shrink: 0;
          }

          .schedule-content {
            flex: 1;
            margin: 0 12px;

            .schedule-name {
              font-size: 14px;
              color: $text-primary;
              margin-bottom: 2px;
            }

            .schedule-details {
              font-size: 12px;
              color: $text-secondary;
            }
          }

          .schedule-status {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;

            &.completed {
              background: rgba(82, 196, 26, 0.2);
              color: #52c41a;
            }

            &.scheduled {
              background: rgba(24, 144, 255, 0.2);
              color: #1890ff;
            }

            &.pending {
              background: rgba(255, 255, 255, 0.1);
              color: $text-tertiary;
            }
          }
        }
      }

      .family-resources {
        .family-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 8px;
          padding: 12px;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          .family-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .family-type {
              font-size: 14px;
              font-weight: 600;
              color: $text-primary;
            }

            .family-capacity {
              font-size: 12px;
              color: $text-secondary;
            }
          }

          .family-details {
            margin-bottom: 8px;

            .family-location {
              font-size: 12px;
              color: $text-secondary;
              margin-bottom: 4px;
            }

            .family-traits {
              display: flex;
              flex-wrap: wrap;
              gap: 4px;
            }
          }

          .family-rating {
            display: flex;
            align-items: center;
            gap: 8px;

            .rating-text {
              font-size: 12px;
              color: $text-tertiary;
            }
          }
        }
      }

      .region-stats {
        .region-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          .region-name {
            font-size: 12px;
            color: $text-secondary;
            width: 80px;
            flex-shrink: 0;
          }

          .region-bar {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin: 0 12px;
            overflow: hidden;

            .bar-fill {
              height: 100%;
              border-radius: 3px;
              transition: width 0.3s ease;
            }
          }

          .region-count {
            font-size: 12px;
            color: $text-primary;
            width: 60px;
            text-align: right;
          }
        }
      }
    }
  }

  // 弹窗样式
  .modal-content {
    .ant-form-item {
      margin-bottom: 16px;
    }
  }

  :deep(.ant-modal) {
    .ant-modal-header {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ant-modal-content {
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
    }

    .ant-modal-body {
      padding: 24px;
    }
  }

  .details-modal-content {
    .details-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      .soul-basic-info {
        display: flex;
        align-items: center;
        gap: 16px;

        .basic-details {
          h3 {
            margin: 0 0 8px 0;
            color: $text-primary;
            font-size: 18px;
          }

          .cycle-info,
          .karma-info {
            color: $text-secondary;
            font-size: 14px;
            margin-bottom: 4px;
          }
        }
      }

      .arrangement-meta {
        display: flex;
        gap: 8px;
      }
    }

    .details-sections {
      .detail-section {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        height: 100%;

        h4 {
          margin: 0 0 16px 0;
          color: $primary-color;
          font-size: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .section-content {
          .info-item {
            display: flex;
            margin-bottom: 12px;

            .info-label {
              color: $text-secondary;
              width: 100px;
              flex-shrink: 0;
            }

            .info-value {
              color: $text-primary;

              &.realm {
                font-weight: 600;
              }
            }
          }

          .family-values {
            margin-top: 16px;

            .values-title {
              color: $text-secondary;
              margin-bottom: 8px;
            }

            .values-tags {
              .ant-tag {
                margin-bottom: 4px;
              }
            }
          }

          .conditions-list {
            .ant-tag {
              margin-bottom: 8px;
            }
          }

          .requirements-text {
            color: $text-primary;
            background: rgba(255, 255, 255, 0.05);
            padding: 12px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    .details-actions {
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
    }
  }

  .edit-modal-content {
    .edit-actions {
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .arrangement-management {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    .arrangement-details {
      grid-template-columns: 1fr !important;
    }

    .tools-panel {
      order: -1;
    }
  }
}
</style>
